<template>
  <div class="qianbao">
    <div class="header">
      <!-- <img
        src="http://o6wndwjxn.qnssl.com/5e600201811201412249361.png"
        alt=""
      > -->
      <div class="jine">
        <span>账户(元)</span>
        <span>{{qb_money.all_money}}</span>
      </div>
      <!-- @click="tab()" -->
      <div class="btn1">
        <div>
          <p class="woship">已提现（元）</p>
          <p class="niship" v-if="yitixian.all_money || yitixian.all_money === 0">{{ String(yitixian.all_money).indexOf(".") + 1 ? yitixian.all_money.toFixed(2) : yitixian.all_money }}</p>
        </div>
        <div>
          <p class="woship">未提现（元）</p>
          <p class="niship">{{qb_money.all_money - yitixian.all_money > 0 ? (qb_money.all_money * 10000 - yitixian.all_money * 10000 ) / 10000 : 0 }}</p>
        </div>
      </div>
    </div>
    <div class="qb_let">
      <!-- <group>
       <cell :link="{path:item.path}" v-for ="(item,index) in lieArr" :key="index" :title="item.name" is-link>
       </cell>
     </group> -->
      <router-link
        :to="{name:item.path,query:{state:item.state}}"
        v-for="(item,index) in lieArr"
        :key='index'
      >
        <span>{{item.name}}</span>
        <img
          src="https://o6wndwjxn.qnssl.com/Thearrow.svg"
          alt=""
        >
        <section
          class="moneny-postion"
          v-if="item.state === 'type' && qb_money.money_sum > 0"
        >￥{{qb_money.money_sum}}</section>
      </router-link>
      <div class="wenxintishi">温馨提示</div>
      <div class="font-ssss">
        <p>1、每笔收益会根据结算规则计入可提现金额，主动提现即可到账；</p>
        <p>2、每笔提现收益会在一个工作日打款到您微信账户中；</p>
        <p style="letter-spacing:3px;">3、如您在提现方面遇到问题，可拨打知运官方热线400-6666-903咨询。</p>
      </div>
    </div>
  </div>
</template>

<script>
import {
  mapState
} from 'vuex'
import {
  Cell,
  CellBox,
  CellFormPreview,
  Group,
  Badge
} from 'vux'
import { typeToOne } from '@/api/center'
import axios from 'axios'
export default {
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  components: {
    Group,
    Cell,
    CellFormPreview,
    CellBox,
    Badge
  },
  data () {
    return {
      yitixian: '',
      type_type: 1,
      qb_money: 0,
      lieArr: [
        {
          name: '我要提现',
          path: 'co_withdrawal',
          state: 'type'
        },
        {
          name: '提现记录',
          path: 'shouyimingxi'
        },
        {
          name: '收益明细',
          path: 'co_wallet_Extension'
        }
      ]
    }
  },
  created () {
    this.getMoney()
    //   {
    //   name: '银行卡',
    //   path: 'bankcard'
    // }
  },
  methods: {
    getMoney () {
      let requery = {
        app_id: this.app_id,
        member_id: this.user_id,
        type_type: this.type_type
      }
      typeToOne(requery).then(res => {
        let { code, data } = res.data
        // console.log('type_to_one', data)
        if (code == 200) {
          if (this.type_type === 1) {
            this.qb_money = data
            this.type_type = 3
            this.getMoney()
            if (this.type_type === 3) {
              this.$store.commit('updateLoadingStatus', { isLoading: false })
            }
          } else {
            this.yitixian = data
          }
        }
      })
    },
    tab () {
      this.$router.push({
        name: 'co_withdrawal'
      })
    }
  }
}
</script>

<style scoped>
.wenxintishi {
  font-size:  calc(100vw * 28 / 750);
  width: 100%;
  text-indent: calc(100vw * 30 / 750);
  margin-top: calc(100vw * 10 / 750);
  color: #999;
  margin-bottom: calc(100vw * 10 / 750);
}
.font-ssss {
  font-size: calc(100vw * 30 / 750);
  margin-left: calc(100vw * 30 / 750);
}
.font-ssss > p {
  width: 100%;
   margin-top: calc(100vw * 10 / 750);
}
.moneny-postion {
  position: absolute;
  right: calc(100vw * 82 / 750);
  top: 50%;
  transform: translate(0, -50%);
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 36 / 750);
  color: #999999;
  letter-spacing: 0.58px;
}
.qianbao {
  width: 100%;
  margin-bottom: calc(100vw * 140 / 750);
  /* background: #fafafa !important; */
}
.qb_let {
  width: 100%;
  background: #ffffff;
}

.qb_let > a {
  display: block;
  width: 100%;
  padding: 0 calc(100vw * 40 / 750);
  position: relative;
  height: calc(100vw * 108 / 750);
  background-repeat: no-repeat;
  background-size: calc(100vw * 40 / 750);
  background-position: calc(100vw * 32 / 750) center;
}
.qb_let > a:nth-of-type(1) {
  background-image: url("https://o6wndwjxn.qnssl.com/%E6%88%91%E8%A6%81%E6%8F%90%E7%8E%B0@2x.png");
}
.qb_let > a:nth-of-type(2) {
  background-image: url("https://o6wndwjxn.qnssl.com/%E6%8F%90%E7%8E%B0%E8%AE%B0%E5%BD%95.png");
}
.qb_let > a:nth-of-type(3) {
  background-image: url("https://o6wndwjxn.qnssl.com/%E6%94%B6%E7%9B%8A%E6%98%8E%E7%BB%86@2x.png");
}
.qb_let > a:nth-of-type(4) {
  background-image: url("https://o6wndwjxn.qnssl.com/%E9%93%B6%E8%A1%8C%E5%8D%A1@3x.png");
}
.qb_let > a:last-child {
  border: none;
}

.qb_let > a span:nth-child(1) {
  display: block;
  text-indent: calc(100vw * 10 / 750);
  line-height: calc(100vw * 108 / 750);
  font-size: calc(100vw * 30 / 750);
  color: #333333;
  font-family: PingFangSC-Regular;
  width: calc(100vw * 618 / 750);
  margin-left: calc(100vw * 70 / 750);
}

.qb_let > a img:nth-child(2) {
  position: absolute;
  right: 20px;
  top: 50%;
  width: calc(100vw * 13 / 750);
  height: calc(100vw * 23 / 750);
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.header {
  width: calc(100vw * 686 / 750);
  height: calc(100vw * 372 / 750);
  overflow: hidden;
  position: relative;
  border-radius: calc(100vw * 12 / 750);
  margin: calc(100vw * 30 / 750);
  background-color: #da4131;
}
.header > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40vh;
  object-fit: cover;
  z-index: 1;
}
.jine {
  position: relative;
  z-index: 2;
}
.jine > span {
  color: white;
  display: block;
  text-indent: calc(100vw * 30 / 750);
}
.jine > span:nth-child(1) {
  font-size: calc(100vw * 28 / 750);
  font-family: PingFangSC-Semibold;
  color: #ffffff;
  margin-top: calc(100vw * 30 / 750);
  font-weight: bold;
}
.jine > span:nth-child(2) {
  font-family: PingFangSC-Semibold;
  margin-top: calc(100vw * 12 / 750);
  font-size: calc(100vw * 80 / 750);
  font-weight: bold;
}

.btn1 {
  width: calc(100% - 100vw * 140 / 750);
  height: calc(100vw * 128 / 750);
  color: white;
  font-size: 15px;
  position: absolute;
  bottom: calc(100vw * 30 / 750);
  display: flex;
}
.btn1 > div:nth-of-type(1) {
  margin: 0 calc(100vw * 30 / 750);
  padding-right: calc(100vw * 140 / 750);
  border-right: solid 1px #fff;
}
.woship {
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 28 / 750);
  padding-bottom: 4px;
}
.niship {
  font-family: PingFangSC-Semibold;
  font-size: calc(100vw * 44 / 750);
  color: #ffffff;
  padding-top: calc(100vw * 25 / 750);
}
.font-ssss > p {
  font-family: PingFangSC-Regular;
  font-size:  calc(100vw * 24 / 750);
  color: #999999;
}
</style>
